<template>
<el-dialog
    title="奖项设置"
    :close-on-click-modal="false"
    width= 30%
    center
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="170px">
      <!-- <el-form-item label="选择商品">
          <div v-if="dataForm.activityId" class="prodBox">
              <span style="width:200px;margin:10px 0 0 10px">{{dataForm.prodName}}</span>
              <img :src="dataForm.pic" alt="" style="width:140px;border-radius:5px">
          </div>          
          <div v-if="!dataForm.activityId">
              <div v-if = '!prod' class="chosenBox" @click="enterChoseProd">
                  <div class="center">
                      <div class="border b1"></div>
                      <div class="border b2"></div>
                      <div class="border b3"></div>
                      <div class="border b4"></div>
                  </div>
              </div>
              <div v-if="prod" class="prodBox" @click="enterChoseProd">
                  <span style="width:200px;margin:10px 0 0 10px">{{prod.prodName}}</span>
                  <img :src="prod.pic" alt="" style="width:140px;border-radius:5px">
              </div>
          </div>
      </el-form-item> -->
      <el-form-item label="奖项" label-width="100px" prop="name">
          <el-input v-model="dataForm.name" placeholder="请输入奖项标题"></el-input>            
      </el-form-item>
      <el-form-item label="中奖概率" label-width="100px" prop="weight">
          <el-input v-model="dataForm.weight" placeholder="请输入中奖概率"></el-input>            
        </el-form-item>
      <el-form-item label="奖品总数" label-width="100px" prop="winningTime">
          <el-input v-model="dataForm.winningTime" placeholder="请输入奖品总数"></el-input>            
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <!-- <el-button @click="testFun">获取dataform</el-button> -->
    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 选择商品 -->
    <el-dialog
        title=""
        :visible.sync="choseProdVisible"
        :close-on-click-modal="false"
        top="8vh"
        width="70%"
        center
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="prodList"
                :option="tableOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="choseProd(scop.row)">确定</el-button>
            </template>                
        </avue-crud>            
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog>



</el-dialog>
</template>

<script>
import { tableOption } from '@/crud/finance/prodList'
export default {
    data() {
        return {
            visible: false,
            choseProdVisible: false,
            tableOption: tableOption,
            dataForm:{
                // prodId:null,
                // activityPrice: 0,
                // activityTimesFlag: '1',
                // activityTimes: 0,
                // activityOrderFlag: '1',
                // activityOrderTimes: 0,
                // startTime: null,
                // endTime: null,
                name: '',
                weight: ''
            },
            prod:null,
            prodList: [],
            dataRule:{
                activityPrice:[
                    { required: true, message: '请填写活动价格', trigger: 'blur'}
                ],
                startTime:[
                    { required: true, message: '请填写活动开始时间', trigger: 'blur'}
                ],
                endTime:[
                    { required: true, message: '请填写活动结束时间', trigger: 'blur'}
                ],
                activityTimes:[
                    { required: true, message: '请填写商品限购数量，填0则不限制购买数量', trigger: 'blur'}
                ],
                activityOrderTimes:[
                    { required: true, message: '请填写限购次数，填0则为不限制下单次数', trigger: 'blur'}
                ],
                
            }
        }
        
    },

    computed: {
        activityTimesFlag(){
            if (this.dataForm.activityTimes == 0) {
                return 0
            }else if (this.dataForm.activityTimes>0) {
                return 1
            }
        },
        activityOrderFlag(){
            if (this.dataForm.activityOrderTimes == 0) {
                return 0
            }else if (this.dataForm.activityOrderTimes>0) {
                return 1
            }
        }
    },
    
    props:{
    },

    methods: {
        init (row) {
            console.log(row);
            // 重置表格
            this.visible = true  
            this.dataForm = {
                id: '',
                name: '',
                weight: '',
                winningTime: '',
            },            
            this.prod = null
            if (row.id) {
                this.dataForm.id = row.id
                this.dataForm.name = row.name
                this.dataForm.weight = row.weight
                this.dataForm.winningTime = row.winningTime
                // this.dataForm.type = String(row.type)
                // this.dataForm.activityPrice = row.activityPrice
                // // this.dataForm.activityTimesFlag = String(row.activityTimesFlag)
                // this.dataForm.activityTimes = row.activityTimes
                // // this.dataForm.activityOrderFlag = String(row.activityOrderFlag)
                // this.dataForm.activityOrderTimes = row.activityOrderTimes
                // this.dataForm.activityId = row.activityId
                // this.dataForm.startTime = row.startTime
                // this.dataForm.endTime = row.endTime
            }
            this.$http({
                url: this.$http.adornUrl("/activity/getActivityPro"),
                method:'get'
            }).then(({data}) =>{
                this.prodList = data            
            })                
        },

        // 表单提交
        dataFormSubmit () {
            // this.$refs['dataForm'].validate((valid) => {
            // if (valid) {
                // console.log(this.amount,this.percent);
                // console.log(this.dataForm.prodId);
                // if (!this.dataForm.prodId) {
                //     this.$message.error('请选择商品')
                //     return
                // }
                // let url = this.dataForm.activityId?'/activity/updateActivityPro':'/activity/saveActivityPro'
                let url = '/luckProduct'
                this.$http({
                    url: this.$http.adornUrl(url),
                    method: this.dataForm.id?'put':'post',
                    data: this.$http.adornParams(
                        Object.assign({
                            id: this.dataForm.id,
                            // pic: this.dataForm.pic,
                            name:this.dataForm.name,
                            weight: this.dataForm.weight,
                            winningTime: this.dataForm.winningTime,
                            // activityPrice: this.dataForm.activityPrice,
                            // activityTimesFlag: this.activityTimesFlag,
                            // activityTimes: this.dataForm.activityTimes,
                            // activityOrderFlag: this.activityOrderFlag,
                            // activityOrderTimes: this.dataForm.activityOrderTimes,
                            // // activityTimes: 1,
                            // startTime: this.dataForm.startTime,
                            // endTime: this.dataForm.endTime,
                            // activityId: this.dataForm.activityId ,
                            // status: 0   
                        },)
                    )              
                }).then(({data}) => {
                  this.$message({
                    message:'操作成功',
                    type:'success'
                  })
                  this.visible = false
                  this.$emit("refreshDataList")
                })
              // }
            // })
        },

        enterChoseProd(){
            this.choseProdVisible = true
            
        },

        choseProd(row){
            this.prod = row
            this.dataForm.prodId = row.prodId
            this.dataForm.pic = row.pic
            this.dataForm.prodName = row.prodName
            this.choseProdVisible = false
        }
    },
}
</script>
<style lang="scss" scoped>
    .chosenBox{
        height: 148px;
        width: 148px;
        border: 1px dashed #C0CCDA;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8C939D; 
        font-size: 48px;
        font-weight: 100;
        cursor: pointer;
    }
    .center{
        height: 26px;
        width: 26px;
        display: flex;
        flex-wrap: wrap;
    }
    .border{
        height: 13px;
        width: 13px;
        border: 1px solid white;
    }
    .b1,.b2{
        border-bottom: 1px solid #c0c0c0;
    }
    .b3,.b4{
        border-top: 1px solid #c0c0c0;
    }
    .b1,.b3{
        border-right: 1px solid #c0c0c0;
    }
    .b2,.b4{
        border-left: 1px solid #c0c0c0;
    }

    .prodBox{
        height: 140px;
        border: 1px solid #c0c0c0;
        width: 340px;
        border-radius: 5px;
        display: flex;
    }

</style>